<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8"/>
  <title>思途Java250703班级 · 自定义动态壁纸版</title>
  <style>
    html,body{
      height:100%;
      margin:0;
      /* 关键：把页面背景也换成自己的 GIF */
      background:url('${pageContext.request.contextPath}/images/chuan.gif') center/cover no-repeat fixed;
      color:#fff;
      font-family:'Segoe UI',Arial,Helvetica,sans-serif;
      overflow:hidden;
    }
    body{display:flex;flex-direction:column;}

    /* 1. 壁纸层：点击消失，仍用原来的 GIF */
    #wallpaper{
      position:fixed;inset:0;z-index:9999;
      background:url('${pageContext.request.contextPath}/images/wallpaper.gif') center/cover no-repeat;
      display:flex;align-items:center;justify-content:center;
      cursor:pointer;transition:opacity .5s ease;
    }
    #wallpaper h1{
      font-size:2.5rem;font-weight:700;
      background:linear-gradient(90deg,#ff3cac,#784ba0,#2b86c5);
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;
      text-shadow:0 0 20px rgba(255,60,172,.6);
    }

    /* 2. 动态背景 Canvas（星空）始终全屏 */
    #bg-canvas{position:fixed;inset:0;z-index:-1;pointer-events:none;}

    /* 3. 上下 1:2 布局（字幕 + 内容） */
    #subtitle-box{flex:1;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;}
    #subtitle{white-space:nowrap;font-size:1.6rem;font-weight:700;background:linear-gradient(90deg,#ff3cac,#784ba0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;padding:.6rem 1.2rem;border-radius:.8rem;box-shadow:0 0 15px rgba(255,60,172,.4);}
    #content-box{flex:2;padding:1.5rem;display:flex;align-items:center;justify-content:center;}
    .content-card{width:96%;max-width:1100px;max-height:90%;padding:2rem;border-radius:1rem;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.12);box-shadow:0 0 20px rgba(255,60,172,.3);overflow-y:auto;}

    /* 4. 鼠标拖尾 */
    .mouse-trail{position:fixed;width:6px;height:6px;border-radius:50%;pointer-events:none;z-index:3;background:radial-gradient(circle,rgba(255,60,172,0.8),transparent);}
  </style>
</head>
<body>

<!-- 壁纸点击消失 -->
<div id="wallpaper">
  <h1>点击进入 · 船船之家</h1>
</div>

<!-- 动态背景 Canvas（星空） -->
<canvas id="bg-canvas"></canvas>

<!-- 上：滚动字幕 -->
<div id="subtitle-box">
  <div id="subtitle">欢迎来到Java250703班级学习 祝每位学生学业有成，拿到自己满意的offer！</div>
</div>

<!-- 下：内容 -->
<div id="content-box">
  <div class="content-card">
    <h2>🎯 教育简介</h2>
    <p>教育成立于2015年，专注<strong>Java 全栈</strong>、<strong>前端</strong>、<strong>大数据</strong>人才培养，累计帮助 <strong>5000+</strong> 学员成功就业，平均月薪 <strong>15K+</strong>。</p>

    <h2>🚀 课程体系</h2>
    <ul>
      <li>JavaSE 基础 + 设计模式</li>
      <li>Spring 全家桶 + 微服务</li>
      <li>Vue3 + React 前端实战</li>
      <li>MySQL / Redis / ES 深度优化</li>
      <li>电商/金融/IM 大型项目实战</li>
    </ul>

    <h2>📊 学员成果</h2>
    <p>2024 年 7 月班就业率 <strong>98%</strong>，最高薪资 <strong>28K</strong>，平均 17K。</p>

    <a class="btn-apply" href="${pageContext.request.contextPath}/teacher_add.jsp">立即报名</a>
  </div>
</div>

<script>
  /* ========= 壁纸点击消失 ========= */
  document.getElementById('wallpaper').addEventListener('click', ()=>{
    document.getElementById('wallpaper').style.opacity='0';
    setTimeout(()=>document.getElementById('wallpaper').remove(), 500);
  });

  /* ========= 动态星空 + 拖尾 ========= */
  const cvs=document.getElementById('bg-canvas'),ctx=cvs.getContext('2d');
  cvs.width=innerWidth;cvs.height=innerHeight;

  const particles=[],colors=['#ff3cac','#784ba0','#2b86c5'],count=20;
  for(let i=0;i<count;i++)particles.push({x:Math.random()*cvs.width,y:Math.random()*cvs.height,r:Math.random()*1.5+0.5,dx:(Math.random()-.5)*.2,dy:(Math.random()-.5)*.2,color:colors[i%colors.length]});

  const trail=[],maxTrail=10;
  document.addEventListener('mousemove',e=>{
    trail.push({x:e.clientX,y:e.clientY,life:1});
    if(trail.length>maxTrail)trail.shift();
  });

  function draw(){
    ctx.clearRect(0,0,cvs.width,cvs.height);
    particles.forEach(p=>{p.x+=p.dx;p.y+=p.dy;if(p.x<0||p.x>cvs.width)p.dx*=-1;if(p.y<0||p.y>cvs.height)p.dy*=-1;ctx.beginPath();ctx.arc(p.x,p.y,p.r,0,Math.PI*2);ctx.fillStyle=p.color;ctx.globalAlpha=.6;ctx.fill();});
    trail.forEach((t,i)=>{ctx.beginPath();ctx.arc(t.x,t.y,3*t.life,0,Math.PI*2);ctx.fillStyle=`hsl(${i*24},100%,60%)`;ctx.fill();t.life-=.08;});
    requestAnimationFrame(draw);
  }
  draw();

  /* ========= 字幕滚动 ========= */
  const subtitle=document.getElementById('subtitle');
  let pos=subtitle.parentElement.offsetWidth;
  function scroll(){
    pos-=2;
    subtitle.style.left=pos+'px';
    if(pos<-subtitle.offsetWidth)pos=subtitle.parentElement.offsetWidth;
    requestAnimationFrame(scroll);
  }
  scroll();
</script>
</body>
</html>